<template>
  <view class="mine-container">
    <view class="title">我的</view>
    <!--顶部个人信息栏-->
    <image class="back-img-box" :src="backImg"></image>
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!name" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="name" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">点击登录</view>
          <view v-if="name" class="user-info">
            <view class="u-title">{{ name }}</view>
            <view class="u-title-fu">{{ phone }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="menu-list">
      <view class="list-cell" @click="supplierManage">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="supplierPath"></image>
          </view>
          <view class="til">供应商管理</view>
        </view>
      </view>
      <view class="list-cell" @click="editPwdManage">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="passwordPath"></image>
          </view>
          <view class="til">修改密码</view>
        </view>
      </view>
      <view class="list-cell" @click="handleLogout">
        <view class="menu-item-box">
          <view class="menu-icon">
            <image :src="logoutPath"></image>
          </view>
          <view class="til">退出登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import storage from '@/utils/storage'
  import config from '@/config'
  export default {
    data() {
      return {
        authMsg: '您的认证不通过，请重新提交认证信息'
      }
    },
    computed: {
      avatar() {
        return this.$store.state.user.consignor.sysUser.avatar ? config.baseUrl + '/viewImg?url=' + this.$store.state.user.consignor.sysUser.avatar : '/static/images/mine/defalut_avatar.png'
      },
      phone() {
        return this.$store.state.user.consignor ? this.$store.state.user.consignor.phonenumber : ''
      },
      name() {
        return this.$store.state.user.consignor ? this.$store.state.user.consignor.realName : ''
      },
      consignor() {
        return this.$store.state.user.consignor
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      },
      backImg() {
        return config.baseImgUrl + '/profile_red.png';
      }
    },
    methods: {
      goBtnHandler(url) {
        this.$tab.navigateTo(url)
      }

    }
  }
</script>

<style lang="scss" scoped>
  .mine-container {
    width: 100%;
    height: 100%;
    font-size: 26.66rpx;

    .back-img-box {
      width: 100vw;
      height: 160px;
      background-color: #eeeeee;
      position: absolute;
      z-index: -1;
    }

    .more-icon {
      .iconfont {
        position: relative;
        top: 39rpx;
        right: -8rpx;
      }
    }

    button {
      height: 30px !important;
      line-height: 30px !important;
      position: absolute;
      right: 17rpx;
    }

    .header-section {
      padding: 15px;
      color: white;

      .login-tip {
        font-size: 32rpx;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 35.55px;
        }
      }

      .user-info {
        margin-left: 15px;
        font-size: 24.88rpx;

        .u-title {
          line-height: 30px;
          font-weight: bold;
          font-size: 32rpx;
        }

        .u-title-fu {
          line-height: 30px;
        }
      }
    }

    .wallet-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #573800;
      border-radius: 14.22rpx;
      margin: 0 26.67rpx 32rpx 26.67rpx;
      padding: 26.67rpx 26.67rpx 21.33rpx 26.67rpx;

      .money-text {
        font-size: 42.67rpx;
        font-weight: 600;
      }

      .view-btn {
        border-radius: 47rpx;
        padding: 8rpx 17.78rpx;
        background-color: #ffffff;
      }
    }
  }
</style>